<template>
    <div class="login">
        <ul class="clr">
            <li>
                <input type="text" v-model="username" placeholder="请输入用户名" />
            </li>
            <li>
                <input type="password" v-model="password" placeholder="请输入密码" />
            </li>
            <li>
                <button @click="apiLogin()">登录</button>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Login",
        // model: {
        //     prop: 'loginInfo',
        //     event: 'input'
        // },
        data () {
            return {
                username: '',
                password: ''
            }
        },
        methods: {
            apiLogin () {
                this.$http.post('/api/login',{
                    username: this.username,
                    password: this.password,
                }).then( rs => {
                    let datas = rs.data;
                    if(datas.code === 0){
                        alert('登录成功');

                        // 存着给后面的接口用
                        localStorage.setItem('token', datas.token);

                        let loginInfo = {
                            isLogin: true,
                            loginUsername: this.username
                        }

                        // v-model 结合 $emit，input 组件间通信
                        this.$emit('input', loginInfo)
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .login{

    }
</style>